<template>
  <div>
    <div class="completeorder_box" v-if="goodsData">
      <div class="completeorder_head">
        <span
          class="iconfont icon-jiantou-left"
          @click="$router.push('/shopping')"
        ></span>
        <p>订单详情</p>
        <span class="iconfont icon-kefu"></span>
      </div>
      <div class="completeorder_user">
        <div class="top">
          <div class="left">
            <span class="iconfont icon-location"></span>
            <p>收件人：123</p>
          </div>
          <div class="right">
            <p>15777536911</p>
          </div>
        </div>
        <div class="bottom">
          <p>123</p>
        </div>
      </div>
      <div class="order_box">
        <div class="box_head">
          <p>{{ goodsData.goods_num == 0 ? "闪电直发" : "普通快递" }}</p>
          <span>|</span>
          <p>{{ goodsData.goods_num == 0 ? "约2天到达" : "约6-7天到达" }}</p>
        </div>
        <div class="box">
          <div class="img">
            <img :src="goodsData.goods_img" />
          </div>
          <div class="test">
            <p class="top">{{ goodsData.goods_test }}</p>
            <p class="mid">{{ goodsData.goods_code }} 数量X1</p>
            <p class="bottom">
              <span class="iconfont icon-tubiaozhizuomoban1"></span>￥{{
                goodsData.goods_price
              }}
            </p>
          </div>
        </div>
      </div>
      <div class="business_box">
        <p class="head">商家信息</p>
        <div class="business">
          <p>商家ID: P21022252052407,支持七天无理由退货服务。</p>
        </div>
      </div>
      <div class="delivery_box">
        <div class="delivery_price">
          <div class="box">
            <p>{{ goodsData.goods_express }}</p>
            <p>￥{{ goodsData.goods_postage }}</p>
          </div>
          <div class="box">
            <p>退运费服务</p>
            <p>平台赠送</p>
          </div>
        </div>
        <div class="and_price">
          <p>合计总支付</p>
          <p>￥{{ price }}</p>
        </div>
      </div>
      <div class="info_box">
        <p class="head">订单信息</p>
        <div class="box">
          <p>订单编号：</p>
          <p>110116157842359377<span>复制</span></p>
        </div>
        <div class="box">
          <p>创建时间：</p>
          <p>{{ goodsData.goTime }}</p>
        </div>
        <div class="box">
          <p>支付方式：</p>
          <p>{{ flag == 0 ? "已支付" : "未支付" }}</p>
        </div>
      </div>
      <div class="completeorder_bottom">
        <div class="box" @click="callOff">
          <p>取消订单</p>
        </div>
        <div
          class="box box_con"
          v-show="goodsData.purchase == 1"
          @click="goPayment"
        >
          <p>立即支付</p>
        </div>
        <div
          class="box"
          v-show="goodsData.purchase == 0"
          @click="$router.push('/shopping')"
        >
          <p>完成订单</p>
        </div>
      </div>
      <van-loading v-show="load" />
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from "vant";
export default {
  data: function () {
    return {
      goodsData: null,
      flag: null,
      load: false,
    };
  },
  created() {
    //获取购买商品信息
    let goodsLists = JSON.parse(sessionStorage.getItem("goodsLists"));
    let i = this.$route.query.index;
    if (i) {
      let time = goodsLists[i].goTime;
      let index = goodsLists.findIndex((item) => {
        return item.goTime == time;
      });
      this.goodsData = goodsLists[index];
      //获取支付状态
      this.flag = goodsLists[index].purchase;
    } else {
      let id = sessionStorage.getItem("id");
      let index = goodsLists.findIndex((item) => {
        return item.goods_cid == id;
      });
      this.goodsData = goodsLists[index];
      //获取支付状态
      this.flag = goodsLists[index].purchase;
    }
  },
  methods: {
    //请往付款
    goPayment() {
      this.$router.push("/selectpayment");
    },
    //取消订单
    callOff() {
      Dialog.confirm({
        title: "确认是否取消订单",
      })
        .then(() => {
          let goodsLists = JSON.parse(sessionStorage.getItem("goodsLists"));
          let index = goodsLists.findIndex((item) => {
            return item.goTime == this.goodsData.goTime;
          });
          if (goodsLists.length == 1) {
            goodsLists = "";
          } else {
            goodsLists = goodsLists.splice(index, 1);
          }
          sessionStorage.setItem("goodsLists", JSON.stringify(goodsLists));
          this.load = true;
          setTimeout(() => {
            this.load = false;
            Toast("取消成功");
            this.$router.push("/shopping");
          }, 2000);
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  computed: {
    //总价格
    price() {
      let num =
        parseInt(this.goodsData.goods_postage) +
        parseInt(this.goodsData.goods_price);
      num = num.toString();
      let i = num.indexOf(".");
      if (i == -1) {
        return (num = num + ".00");
      } else {
        return num;
      }
    },
  },
};
</script>

<style lang="less">
.completeorder_box {
  position: relative;
  .completeorder_head {
    padding: 10px 18px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    span {
      font-weight: bold;
    }
  }
  .completeorder_user {
    padding: 15px 23px 0;
    background-color: #fff;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: bold;
      .left {
        display: flex;
        align-items: center;
      }
      span {
        font-weight: 400;
        padding-right: 8px;
      }
    }
    .bottom {
      padding-left: 23px;
      padding-top: 7px;
      padding-bottom: 12px;
      font-size: 12px;
      color: #86858e;
    }
  }
  .order_box {
    margin-top: 5px;
    padding: 20px 10px;
    background-color: #fff;
    .box_head {
      display: flex;
      font-size: 12px;
      p,
      span {
        display: inline-block;
        transform: scale(0.9);
      }
      p:first-child {
        font-weight: bold;
      }
    }
    .box {
      padding-top: 7px;
      display: flex;
      .img {
        width: 97px;
        height: 97px;
        box-sizing: border-box;
        border: 2px solid #fbfbfb;
        border-radius: 3px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .test {
        font-size: 12px;
        padding-left: 15px;
        .top {
          padding-right: 10px;
          min-height: 30px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .mid {
          padding: 8px 0;
          display: inline-block;
          transform: scale(0.8) translateX(-8px);
          color: #8e8c92;
        }
        .bottom {
          font-size: 14px;
          font-weight: bold;
          span {
            font-weight: 400;
            padding-right: 10px;
          }
        }
      }
    }
  }
  .business_box {
    margin-top: 8px;
    padding: 14px 20px 10px;
    font-size: 12px;
    background-color: #fff;
    .head {
      padding-bottom: 15px;
    }
    .business {
      color: #89888f;
    }
  }
  .delivery_box {
    margin-top: 8px;
    padding: 8px 20px;
    background-color: #fff;
    .delivery_price {
      border-bottom: 2px solid #fbfbfb;
      .box {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        padding: 10px 0;
      }
    }
    .and_price {
      padding-top: 10px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      p:last-child {
        font-weight: bold;
        font-size: 16px;
      }
    }
  }
  .info_box {
    margin-top: 8px;
    padding: 0 20px;
    background-color: #fff;
    font-size: 12px;
    .head {
      padding: 15px 0;
    }
    .box {
      padding-bottom: 10px;
      color: #a1a0a5;
      display: flex;
      justify-content: space-between;
      span {
        display: inline-block;
        margin-left: 8px;
        box-sizing: border-box;
        border: 2px solid #a1a0a5;
        padding: 0 5px;
        transform: scale(0.8);
      }
    }
  }
  .completeorder_bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    display: flex;
    padding: 10px 20px;
    box-sizing: border-box;
    border-top: 1px solid #fcfcfc;
    justify-content: right;
    .box {
      display: inline-block;
      padding: 10px;
      margin-left: 5px;
      font-size: 12px;
      border: 2px solid #a1a0a5;
      border-radius: 3px;
    }
    .box_con {
      color: #fff;
      background-color: #03c9cf;
      border: transparent;
    }
  }
  .van-loading {
    position: absolute;
    left: 45%;
    top: 45%;
  }
}
</style>